<template>
  <div>
    <div class="solitaire-bottom">
      <div class="solitaire-bottom-btn">
        <div class="left-btn" @click="handleClickOpenCar">
          <span class="icon">
            <img src="https://img.wifenxiao.com/h5-wfx/images/activity/icon_more.png" alt="">
            <span class="num" v-if="carInfo.cart_num && carInfo.cart_num > 0">{{ carInfo.cart_num }}</span>
          </span>
          <span class="price"><span v-html="scaleGoodsPriceFn(carInfo.cart_amount)"></span></span>
        </div>
        <div class="right-btn" v-if="$route.query.activity_type == 'solitaire'" @click="goToActivity">参与接龙</div>
        <div class="right-btn" :class="carInfo.cart_num > 0 ? '': 'disabled'" v-else @click="handleClickBuy">接龙购买</div>
      </div>
    </div>
    <menu-car
      ref="menuCart"
      :visible.sync="showDialog"
      @addSuccess="addSuccess"></menu-car>
    <sku-dialog
      :visible.sync="skuDialogVisible"
      activityType="addSolitaireCar"
      :itemId="itemId"
      :activity_id="activity_id"
      @addSolitaireSuccess="addSuccess"></sku-dialog>
  </div>
</template>

<script>
  import Vue from 'vue'
  import { isIOS } from '@/utils/validate'
  import { scaleGoodsPrice } from '@/utils/index'
  import { getCartData } from '@/api/item/activity'
  import Store from '@/utils/store'
  import menuCar from '../menuCar'
  import skuDialog from '@/views/item/components/skuDialog'
  export default Vue.extend({
    name: 'index',
    components: {
      menuCar,
      skuDialog
    },
    props: {
      itemId: {
        type: [String, Number]
      }
    },
    data() {
      return {
        activity_id: '',
        skuDialogVisible: false,
        showDialog: false,
        carInfo: {}
      }
    },
    methods: {
      // 点击左侧按钮打开购物车弹层
      handleClickOpenCar() {
        this.showDialog = true
      },
      // 跳转接龙活动
      goToActivity() {
        this.$JumpName(this, 'groupSolitaire', { activity_id: this.$route.query.activity_id })
      },
      // 接龙购买
      handleClickBuy() {
        const buy_need_fans = this.$store.getters.wxConfig.buy_need_fans
        const that = this
        if (buy_need_fans == 1) {
          that.$isFans(() => {
            that.$Error('请先等待商家绑定公众号')
            return false
          }, () => {
            that.$parent.$refs.shopCode.dialogVisible = true
            return false
          }, () => {
            // 打开sku弹窗
            that.buyEvent()
          })
        } else {
          that.buyEvent()
        }
      },
      buyEvent() {
        if (this.carInfo.cart_num <= 0) {
          this.$Error('请选择至少一件商品')
          return false
        }
        const cartList = this.$refs.menuCart.items
        const skuId = []
        const arrNum = []
        const idArr = []
        const dateArr = []
        const memoArr = []
        const orderBuy = {
          group_solitaire_activity_id: this.activity_id
        }
        cartList.forEach(item => {
          skuId.push(item.sku_id)
          arrNum.push(item.num)
          idArr.push(item.item_id)
          dateArr.push(item.item_date)
          memoArr.push(item.item_memo)
        })
        orderBuy.item_id = idArr.join(',')
        orderBuy.sku_id = skuId.join(',')
        orderBuy.num = arrNum.join(',')
        orderBuy.order_extry = {}
        orderBuy.order_extry.item_date = dateArr.join(',')
        orderBuy.order_extry.item_memo = memoArr.join(',')
        orderBuy.type = 'oncart'
        Store.save('orderBuy', orderBuy)
        setTimeout(()=>{
          this.$JumpName(this, 'buy')
        },200)
      },
      // 获取购物车数据
      getCartDataFn() {
        const param = {}
        param.activity_id = this.activity_id
        getCartData(param).then(res => {
          if (res.status == 1) {
            const resData = res.data
            this.carInfo = resData
          }
        })
      },
      // 添加成功之后
      addSuccess() {
        // console.log('添加成功')
        this.skuDialogVisible = false
        this.getCartDataFn()
        this.$refs.menuCart.goodsListData()
      },
      // 价格展示
      scaleGoodsPriceFn(price) {
        return scaleGoodsPrice(price, 'large')
      }
    },
    mounted() {
      window.addEventListener('wxload', query => {
        this.activity_id = query.activity_id || this.$route.query.activity_id
        this.getCartDataFn()
      })
    }
  })
</script>

<style lang="scss">
  .miniprogram-root {
    .solitaire-bottom {
      z-index: 1;
    }
  }
  .time-count{
    span:first-child{
      width: auto!important;
    }
  }
  .beforeStart{ // 未开始的样式
    .solitaire-bottom{
      pointer-events: none;
      &-btn{
        border: 1px solid rgba(253, 75, 85, 0.3);
        .right-btn{
          background: rgba(253, 75, 85, 0.3);
        }
      }
    }
  }
  .finished{
    .price-scale{
      color: #EDEDED!important;
    }
    .solitaire-item{
      &-wrap{
        &-list{
          .right-wrap{
            &-progress{
              background: #EDEDED;
              &-bg{
                display: none;
              }
            }
          }
        }
      }
    }
    .solitaire-bottom{
      pointer-events: none;
      &-btn{
        border: 1px solid #DBDBDB;
        .left-btn{
          filter: grayscale(100%);
        }
        .right-btn{
          background: #DBDBDB;
        }
      }
    }
  }
  .solitaire-bottom{
    position: fixed;
    z-index: 90;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 108px;
    background: #FFFFFF;
    box-shadow: 0px -3px 6px 0px rgba(0, 0, 0, 0.06);
    &-btn{
      width: 640px;
      margin: 16px auto 0;
      border: 1px solid #FF0000;
      height: 76px;
      line-height: 76px;
      font-size: 28px;
      border-radius: 40px;
      display: flex;
      overflow: hidden;
      .left-btn{
        flex: 0 270px;
        white-space: nowrap;
        .icon{
          display: inline-block;
          padding: 0 15px 0 28px;
          position: relative;
          vertical-align: top;
          height: 100%;
          line-height: 100px;
          img{
            width: 30px;
          }
          .num {
            position: absolute;
            top: 0px;
            left: 40px;
            min-width: 32px;
            padding: 0 4px;
            height: 32px;
            line-height: 32px;
            text-align: center;
            border-radius: 50px;
            background: #ea2b18;
            color: #fff;
            font-size: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }
      }
      .right-btn{
        flex: 1;
        text-align: center;
        color: #fff;
        background: #FF0000;
        &.disabled{
          background: rgba(253, 75, 85, 0.6);
          pointer-events: none;
        }
      }
    }
  }
</style>
